<template>
  <div>
    <div class="head">
      <span class="span1">我的订单</span>
      <div class="div1">
      <el-tabs class="a" v-model="activeName">
        <!-- 全部 -->
        <el-tab-pane label="全部" name="first" >
          <el-card class="box-card" id="da" :data=tableData v-for="(v,index) in data" :key="index">
            <div class="text item">
                <p class="p1">{{v.shop_store}}</p>
                <p class="p2">{{v.shop_status}}</p>
                <img :src="v.shop_img" alt="" class="img1">
                <p class="p3" @click="info(v.id)">{{v.shop_name}}</p>
                <p class="type">{{v.shop_type}}</p>
                <p class="price">{{v.shop_price}}</p>
                <p class="num">x{{v.shop_num}}</p>
                <p class="huan">七天换货</p>
                <p class="fei">运费险</p>
                <p class="fei1">确认收货前退货可赔付9元</p>
                <p class="fiex">{{v.shop_fiex}}</p>
                <p class="sum">共计{{v.shop_num}}件商品</p>
                <p class="sumprice">合计：￥{{v.shop_sumprice}}</p>
                <button class="del" @click="del(v.id)">删除订单</button>
            </div>
          </el-card>
          <span class="no">没有更多了哦~</span>
        </el-tab-pane>




        <!-- 待付款 -->
        <el-tab-pane label="待付款" name="second">
         <el-card class="box-card" id="da" :data=tableData v-for="(v,index) in data" :key="index" >
           
            <div class="text item" >
                <p class="p1">{{v.shop_store}}</p>
                <p class="p2">
                  {{v.shop_status}}
                  </p>
                <img :src="v.shop_img" alt="" class="img1">
                <p class="p3">{{v.shop_name}}</p>
                <p class="type">{{v.shop_type}}</p>
                <p class="price">{{v.shop_price}}</p>
                <p class="num">x{{v.shop_num}}</p>
                <p class="huan">七天换货</p>
                <p class="fiex">{{v.shop_fiex}}</p>
                <p class="sum">共计{{v.shop_num}}件商品</p>
                <p class="sumprice">合计：￥{{v.shop_sumprice}}</p>
                <button class="del" @click="del(v.id)">删除订单</button>
            </div>
           
          </el-card>
        </el-tab-pane>




        <!-- 待发货 -->
        <el-tab-pane label="待发货" name="third">
          <el-card class="box-card">
            <div class="text item">
              三大将发挥空间和公交卡哈计划公爵黑卡几个号圣诞节哈吉斯工
            </div>
          </el-card>
        </el-tab-pane>




        <!-- 待收货 -->
        <el-tab-pane label="待收货" name="fourth">
          <el-card class="box-card">
            <div class="text item">
              三大将发挥空间和公交卡哈斯工行卡
            </div>
          </el-card>
        </el-tab-pane>



        <!-- 待评价 -->
        <el-tab-pane label="待评价" name="five">
          <el-card class="box-card">
            <div class="text item">
              三大将发挥
             </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: {},
      data: '',
      datas:'',
       activeName: 'first'
    }
  },
//展示
 created(){
      let t = this
    this.$axios({
      url: '/shop'
    }).then(function (res) {
      t.data = res.data.data
      console.log(t.data)
    })
},
  
methods:{
  
    
    


//删除
del(id){
  var t=this;
  this.$axios({
    url: '/del?id='+id,
    data: {
      id:id
    }
  }).then(function(res){
    var code=res.data.code;
    console.log(code);
    if(code==='10001'){
      alert(res.data.msg) 
      t.data = res.data.data
    }
  })
},

//内容详情查询
info(id){
var that=this;
  this.$axios({
    url: '/info?id='+id,
    data: {
      id:id
    }
  }).then(function(res){
    var code=res.data.code;
    var data=res.data.data;
    console.log(data);
    if(code==='10001'){
      alert(res.data.msg) 
      that.$router.push({
        name:'info',
        params:{
          id:id
        }
      })
    }
  })
}
},



}
</script>

<style lang="">
.no{
  font-weight: 600;
  font-size: 14px;
  color: #896d5d;
}
.del{
  width: 80px;
  height: 30px;
  background-color: #ffffff;
  border-radius: 20px;
  border: 1px solid black;
  margin-left: 270px;
}
.sumprice{
  width: 175px;
  margin-left: 215px;
  font-size: 13px;
  margin-top: -30px;
}
.sum{
  width: 175px;
  margin-left: 105px;
  font-size: 13px;
  margin-top: 50px;
  color: #999999;
}
.fiex{
  font-size: 13px;
  margin-right: -300px;
  margin-top: -32px;
}
.fei1{
  width: 175px;
  margin-left: 105px;
  font-size: 13px;
  margin-top: -32px;
  color: #999999;
}
.fei{
  font-size: 14px;
  margin-left: -200px;
}
.huan{
  width: 65px;
  height: 20px;
  margin-left: 110px;
  background-color: #f0d5b8;
  font-size: 13px;
  margin-top: 40px;
  color: #ffffff;
  border-radius: 5px;
}
.p1{
  width: 100px;
  margin-top: -10px;
  margin-left: -10px;
}
.p2{
  width: 90px;
  height: 0px;
  margin-left: 290px;
  margin-top: -35px;
  color:red;
  font-size: 14px;
}
.p3{
  width: 170px;
  margin-left: 110px;
  margin-top: -110px;
  font-size: 15px;
  cursor: pointer;
  text-align: left;
}
.img1{
  width: 110px;
  height: 110px;
  border-radius: 10px;
  margin-left: -260px;
  margin-top: 15px;
}
.type{
  font-size: 13px;
  color: #999999;
  margin-left: 110px;
  margin-top: -5px;
  width: 150px;
  text-align: left;
  /* background-color: #896d5d; */
}
.price{
  font-size: 15px;
  color: #999999;
  margin-right: -300px;
  margin-top: -78px;
}
.num{
  font-size: 15px;
  color: #999999;
  margin-right: -330px;
  margin-top: -10px;
}
.div1 .a{
display: inline-table;
margin-top: 13px;
}
  .head{
    height: 80px;
    width: 420px;
    background-color: #eae9e5;
  }
  .span1{
    font-size: 130%;
    font-weight: 700;
  }
  .box-card{
    width: 400px;
  }
</style>
